window.onresize = function() {
	getRem(100, 1248);
	winW = $(window).width();
	drawGrid($(".grid_box"), "#f0ff00");
	lineChart.setOption(getLineOption(), true);
	lineChart.resize();
	barChart.setOption(getBarOption(), true);
	barChart.resize();
	pieChart.setOption(getPieOption(), true);
	pieChart.resize();
};
var rotateTimer = null, //矩形旋转timeOut
	winW = null,
	topNumTimer = null, //顶部两数字定时
	rectNumTimer = null, //4个网格数字定时
	todayArrviedNum = 1329, //今日到馆
	yesterdayArrivedNum = 1329, //昨日到馆
	personNum = 177568234, //累计到馆
	lineChart = null,
	lineChartTimer = null,
	barChart = null,
	barChartTimer = null,
	pieChart = null,
	pieChartTimer = null,
	/////////////////////////////////////////
	////////2018.11.13添加代码
	XAxis=[],///借出x轴数据
	seriesData1=[],///借出数据
	initArr=[
		{"date":"11月13日","borrowOut":1563},
		{"date":"11月12日","borrowOut":1856},
		{"date":"11月11日","borrowOut":1963},
		{"date":"11月10日","borrowOut":1696},
		{"date":"11月09日","borrowOut":1785},
		{"date":"11月08日","borrowOut":2000},
		{"date":"11月07日","borrowOut":1823},
	];////模拟后台返回的数据结构

window.onload = function() {
	getRem(100, 1248);
	winW = $(window).width();
	//////2018.11.13添加代码
	//////调用初始化构造函数
	createInitData(2000,1500,initArr);
	//顶部数字滚动
	new CountUp($(".todayArrived_target"), 0, todayArrviedNum, 0, 2).start();
	new CountUp($(".yesterdayArrived_target"), 0, yesterdayArrivedNum, 0, 2).start();
	topNumMove();
	//累计到馆数字滚动
	new CountUp($(".textContent .person"), 0, personNum, 0, 4).start();
	rectNumMove();
	//矩形旋转结束后重复动画
	$(".rect_green4").on("webkitAnimationEnd mozAnimationEnd MSAnimationEnd animationend", function() {
		if(!!rotateTimer) clearTimeout(rotateTimer);
		$(".rect .GPU").removeClass("move");
		rotateTimer = setTimeout(function() {
			$(".rect .GPU").addClass("move");
		}, 50 / 3)
	})
	//绘制网格
	drawGrid($(".grid_box"), "#f0ff00");
	//折线图
	lineChart = echarts.init(document.getElementById('todayArrviedChart'));
	lineChart.setOption(getLineOption(), true);
	lineMove();
	//柱状图
	barChart = echarts.init(document.getElementById('sevenDayArrviedBar'));
	barChart.setOption(getBarOption(), true);
	barMove();
	//饼图
	pieChart = echarts.init(document.getElementById('weekPie'));
	pieChart.setOption(getPieOption(), true);
	pieMove();
}

function drawGrid(box, color) {
	box.find("canvas").remove();
	var c = $("<canvas class='grid_canvas'></canvas>")[0];
	box.append(c);
	var w = c.width = box.width(),
		h = c.height = box.width(),
		ctx = c.getContext('2d'),
		opts = {
			len: getW(15),
			count: 100,
			baseTime: 10,
			addedTime: 10,
			dieChance: .05,
			spawnChance: 1,
			sparkChance: .1,
			sparkDist: 10,
			sparkSize: 1,
			color: color,
			baseLight: 0,
			addedLight: 10, // [50-10,50+10]
			shadowToTimePropMult: 0,
			baseLightInputMultiplier: .01,
			addedLightInputMultiplier: .02,

			cx: w / 2,
			cy: h / 2,
			repaintAlpha: .04,
			hueChange: .1
		},

		tick = 0,
		lines = [],
		dieX = w / opts.len,
		dieY = h / opts.len,

		baseRad = Math.PI * 2 / 4;

	ctx.fillStyle = 'transparent';
	ctx.fillRect(0, 0, w, h);

	function loop() {
		if(!!box.timer) cancelAnimationFrame(box.timer)
			++tick;
		ctx.globalCompositeOperation = 'source-over';
		ctx.shadowBlur = 0;
		ctx.fillStyle = 'rgba(0,0,0,alp)'.replace('alp', opts.repaintAlpha);
		ctx.fillRect(0, 0, w, h);
		ctx.globalCompositeOperation = 'lighter';

		if(lines.length < opts.count && Math.random() < opts.spawnChance)
			lines.push(new Line);

		lines.map(function(line) {
			line.step();
		});
		box.timer = window.requestAnimationFrame(loop);
	}

	function Line() {
		this.reset();
	}
	Line.prototype.reset = function() {

		this.x = 0;
		this.y = 0;
		this.addedX = 0;
		this.addedY = 0;

		this.rad = 0;

		this.lightInputMultiplier = opts.baseLightInputMultiplier + opts.addedLightInputMultiplier * Math.random();
		this.color = opts.color.replace('hue', tick * opts.hueChange);
		this.cumulativeTime = 0;
		this.beginPhase();
	}
	Line.prototype.beginPhase = function() {

		this.x += this.addedX;
		this.y += this.addedY;

		this.time = 0;
		this.targetTime = (opts.baseTime + opts.addedTime * Math.random()) | 0;

		this.rad += baseRad * (Math.random() < .5 ? 1 : -1);
		this.addedX = Math.cos(this.rad);
		this.addedY = Math.sin(this.rad);

		if(Math.random() < opts.dieChance || this.x > dieX || this.x < -dieX || this.y > dieY || this.y < -dieY)
			this.reset();
	}
	Line.prototype.step = function() {

		++this.time;
		++this.cumulativeTime;

		if(this.time >= this.targetTime)
			this.beginPhase();

		var prop = this.time / this.targetTime,
			wave = Math.sin(prop * Math.PI / 2),
			x = this.addedX * wave,
			y = this.addedY * wave;

		ctx.shadowBlur = prop * opts.shadowToTimePropMult;
		ctx.fillStyle = ctx.shadowColor = this.color.replace('light', opts.baseLight + opts.addedLight * Math.sin(this.cumulativeTime * this.lightInputMultiplier));
		ctx.fillRect(opts.cx + (this.x + x) * opts.len, opts.cy + (this.y + y) * opts.len, 0.5, 0.5);
		if(Math.random() < opts.sparkChance)
			ctx.fillRect(opts.cx + (this.x + x) * opts.len + Math.random() * opts.sparkDist * (Math.random() < .5 ? 1 : -1) - opts.sparkSize / 2, opts.cy + (this.y + y) * opts.len + Math.random() * opts.sparkDist * (Math.random() < .5 ? 1 : -1) - opts.sparkSize / 2, opts.sparkSize, opts.sparkSize)
	}
	loop();
}

function getW(num) {
	return num * winW / 1248;
}


//顶部两数字滚动
var topNumIndex = 0,
	topNumLoopTime = 5; //顶部两数字滚动重汇时间间隔
function topNumMove() {
	if(!!window.pieChartTimer) cancelAnimationFrame(window.topNumTimer);
	if(topNumIndex >= (topNumLoopTime * 60)) {
		topNumIndex = 0;
		new CountUp($(".todayArrived_target"), 0, todayArrviedNum, 0, 2).start();
		new CountUp($(".yesterdayArrived_target"), 0, yesterdayArrivedNum, 0, 2).start();
	}
	topNumIndex++;
	window.topNumTimer = requestAnimationFrame(topNumMove);
}
//4个网格数字滚动
var rectNumIndex = 0,
	rectNumLoopTime = 8; //顶部两数字滚动重汇时间间隔
function rectNumMove() {
	if(!!window.rectNumTimer) cancelAnimationFrame(window.rectNumTimer);
	if(rectNumIndex >= (rectNumLoopTime * 60)) {
		rectNumIndex = 0;
		new CountUp($(".textContent .person"), 0, personNum, 0, 4).start();
	}
	rectNumIndex++;
	window.rectNumTimer = requestAnimationFrame(rectNumMove);
}

function getLineOption() {
	return {
		title: {
			text: '今日到馆曲线',
			left: "center",
			top: getW(42),
			textStyle: {
				color: '#fff',
				fontSize: getW(20),
				fontWeight: 100
			},
			padding: [0, 0, 0, 0]
		},
		tooltip: {
			trigger: 'axis',
			show: false
		},
		grid: {
			left: getW(60),
			top: getW(94),
			right: getW(26),
			bottom: getW(65)
		},
		color: ['#00fe88'],
		calculable: true,
		xAxis: {
			type: 'category',
			boundaryGap: false,
			axisLine: {
				show: false,
				onZero: true
			},
			axisTick: {
				show: false
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: 'rgba(232,232,232,.4)'
				},
			},
			axisLabel: {
				interval: 0,
				margin: getW(25),
				textStyle: {
					color: '#fff',
					fontSize: getW(16),
				}
			},
			data: ["8点", "9点", "10点", "11点", "12点", "13点", "14点", "15点", "16点"]
		},
		yAxis: [{
			type: 'value',
			axisLine: {
				show: false,
			},
			boundaryGap: false,
			axisTick: {
				show: false
			},
			splitLine: {
				lineStyle: {
					color: 'rgba(232,232,232,.4)'
				}
			},
			axisLabel: {
				show: true,
				formatter: '{value}',
				textStyle: {
					color: '#fff',
					fontSize: getW(16),
				}
			}
		}],
		series: [{
				name: '今日到馆',
				type: 'line',
				symbol: 'emptyCircle',
				symbolSize: getW(8),
				label: {
					normal: {
						show: true,
						position: 'top',
						textStyle: {
							fontSize: getW(16),
						}
					}
				},
				lineStyle: {
					width: getW(2)
				},
				animationDelay: function(idx) {
					return idx * 10 + 100;
				},
				data: [200, 353, 422, 309, 498, 599, 456, 603, ""]
			},
			{
				name: '今日到馆1',
				type: 'line',
				symbolSize: getW(8),
				smooth: true,
				label: {
					normal: {
						show: true,
						position: 'top',
						textStyle: {
							fontSize: getW(16),
						}
					}
				},
				animationDelay: function(idx) {
					return idx * 10 + 100;
				},
				lineStyle: {
					width: getW(2),
					type: "dotted"
				},
				data: ["", "", "", "", "", "", "", 603, 700]
			}
		]
	}
}

var chartIndex = 0,
	chartLoopTime = 8; //折线图重汇时间间隔
function lineMove() {
	if(!!window.lineChartTimer) cancelAnimationFrame(window.lineChartTimer);
	if(chartIndex >= (chartLoopTime * 60)) {
		chartIndex = 0;
		lineChart.dispose();
		lineChart = echarts.init(document.getElementById('todayArrviedChart'));
		lineChart.setOption(getLineOption(), true);
	}
	chartIndex++;
	window.lineChartTimer = requestAnimationFrame(lineMove);
}

function getBarOption() {
	return {
		title: {
			text: '近七日到馆趋势',
			left: "center",
			top: getW(36),
			textStyle: {
				color: '#fff',
				fontSize: getW(22),
				fontWeight: 100
			},
			padding: [0, 0, 0, 0]
		},
		tooltip: {
			trigger: 'axis',
			show: false
		},
		grid: {
			left: getW(51),
			top: getW(90),
			right: getW(10),
			bottom: getW(37)
		},
		color: ['#00fe88'],
		calculable: true,
		xAxis: {
			type: 'category',
			name: '9月',
			nameLocation: 'start',
			nameTextStyle: {
				color: '#fff',
				fontSize: getW(16)
			},
			boundaryGap: [getW(10), getW(48)],
			axisLine: {
				show: true,
				onZero: false,
				lineStyle: {
					color: 'rgba(0,254,136,.2)'
				}
			},
			axisTick: {
				show: false
			},
			splitLine: {
				show: false,
			},
			axisLabel: {
				interval: 0,
				margin: getW(14),
				textStyle: {
					color: '#fff',
					fontSize: getW(16),
				}
			},
			data: XAxis
		},
		yAxis: [{
			type: 'value',
			axisLine: {
				show: false,
			},
			boundaryGap: false,
			axisTick: {
				show: false
			},
			splitLine: {
				show: false
			},
			axisLabel: {
				show: false,
			}
		}],
		series: [{
			name: '近7日到馆',
			type: 'bar',
			symbol: 'emptyCircle',
			symbolSize: getW(8),
			label: {
				normal: {
					show: true,
					position: 'top',
					distance: getW(10),
					textStyle: {
						fontSize: getW(20),
						color: '#f0ff00'
					}
				}
			},
			barWidth: getW(6),
			itemStyle: {
				barBorderRadius: [getW(3), getW(3), getW(3), getW(3)],
				color: {
					type: 'linear',
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [{
						offset: 0,
						color: 'rgba(0,254,136,.7)' // 0% 处的颜色
					}, {
						offset: 1,
						color: 'rgba(240,255,0,.7)' // 100% 处的颜色
					}],
					globalCoord: false // 缺省为 false
				}
			},
			animationDelay: function(idx) {
				return idx * 10 + 100;
			},
			data: seriesData1
		}],
		animationEasing: 'elasticOut',
		animationDelayUpdate: function(idx) {
			return idx * 5;
		}
	}
}

var barIndex = 0,
	barLoopTime = 7; //柱状图图重汇时间间隔
function barMove() {
	if(!!window.barChartTimer) cancelAnimationFrame(window.barChartTimer);
	if(barIndex >= (barLoopTime * 60)) {
		barIndex = 0;
		barChart.dispose();
		barChart = echarts.init(document.getElementById('sevenDayArrviedBar'));
		barChart.setOption(getBarOption(), true);
	}
	barIndex++;
	window.barChartTimer = requestAnimationFrame(barMove);
}

function getPieOption() {
	return {
		title: {
			text: '本周到馆占比图',
			left: "center",
			top: getW(5),
			textStyle: {
				color: '#fff',
				fontSize: getW(22),
				fontWeight: 100
			},
			padding: [0, 0, 0, 0]
		},
		tooltip: {
			trigger: 'axis',
			show: false
		},
		visualMap: {
			show: false,
			min: 200,
			max: 600,
			inRange: {
				colorAlpha: [0.2, 1]
			}
		},
		grid:{
			//bottom:'10%'
		},
		series: [{
			name: '本周到馆占比',
			type: 'pie',
			startAngle: 90,
			clockwise: false,
			radius: [getW(5), getW(125)],
			center: ['50%', getW(180)],
			avoidLabelOverlap:false,
			roseType: 'area',
			label: {
				show: true,
				position: 'outside',
				formatter: function(data) {
					return '{a|'+data.value+'人\n}'+'{b|'+data.percent+"%}"
				},
				color: '#f0ff00',
				rich: {
					a: {
						color: '#f0ff00',
						fontSize : getW(16)
					},
					b: {
						lineHeight: getW(30),
						color: '#00fe88',
						fontSize : getW(16)
					},
				}
			},
			labelLine: {
				length: getW(2),
				length2: getW(4),
				lineStyle: {
					color: 'rgba(0,254,136, 1)',
				}
			},
			itemStyle: {
				normal: {
					color: '#36d98d',
					shadowBlur: 200,
					shadowColor: 'rgba(0, 0, 0, 0.5)'
				}
			},
			animationType: 'scale',
			animationEasing: 'elasticOut',
			animationDelay: function(idx) {
				return Math.random() * 200;
			},
			data: [{
					value: 700,
					name: "周一"
				},
				{
					value: 357,
					name: "周二"
				},
				{
					value: 431,
					name: "周三"
				},
				{
					value: 489,
					name: "周四"
				},
				{
					value: 687,
					name: "周五"
				},
				{
					value: 789,
					name: "周六"
				},
				{
					value: 457,
					name: "周日"
				},
			]
		}],
		animationEasing: 'elasticOut',
		animationDelayUpdate: function(idx) {
			return idx * 5;
		}
	}
}

var pieIndex = 0,
	pieLoopTime = 9; //柱状图图重汇时间间隔
function pieMove() {
	if(!!window.pieChartTimer) cancelAnimationFrame(window.pieChartTimer);
	if(pieIndex >= (pieLoopTime * 60)) {
		pieIndex = 0;
		pieChart.dispose();
		pieChart = echarts.init(document.getElementById('weekPie'));
		pieChart.setOption(getPieOption(), true);
	}
	pieIndex++;
	window.pieChartTimer = requestAnimationFrame(pieMove);
}
///initArr构造初始化数据  maxNum模拟数据最大值, minNum模拟数据最小值
function createInitData(maxNum,minNum,initArr){
	///如果返回的数据小于7条就执行初始好功能
	if(initArr.length<7){
		console.log('柱状图小于7条开始补数据');
		for (var i =6; i >=initArr.length; i--) {
			var borrowOut = parseInt(Math.random() * (maxNum - minNum+ 1) + minNum);///产生随机数
			var borrowIn = parseInt(Math.random() * (maxNum - minNum + 2) + minNum);///产生随机数
			console.log(getBeforeDate(-i),borrowOut,borrowIn);
			XAxis.push(getBeforeDate(-i));
			seriesData1.push(borrowOut);
		}
	}
	for (var j = initArr.length-1; j >= 0; j--) {
		XAxis.push(initArr[j].date);///x轴名字
		seriesData1.push(initArr[j].borrowOut);///借出数据
	}
}




